import { useUserStore } from '@/store/modules/user'
import type { DirectiveBinding } from 'vue'

export default {
  //   inserted 改为 mounted
  mounted(el: HTMLElement, binding: DirectiveBinding<string[]>) {
    const { value } = binding //value是绑定的指令数组值
    console.log('权限指令 mounted - 所需权限:', value)
    // 空白表示无需权限
    if (value && value.join('') === '') {
      return true
    }
    const userStore = useUserStore()
    // 从用户store中获取权限数组
    const permissions = userStore.permissions || []
    if (value && value instanceof Array && value.length > 0) {
      // 检查用户是否有超级权限
      if (permissions.includes('all')) {
        return // 有 'all' 权限，显示所有内容
      }
      // 检查用户权限数组是否包含所需权限中的任意一个
      const hasPermission = value.some((requiredPermission: string) => {
        const result = permissions.includes(requiredPermission)
        return result
      })

      console.log('最终权限检查结果:', hasPermission)

      if (!hasPermission) {
        // 直接移除 DOM 元素
        el.parentNode?.removeChild(el)
      }
    } else {
      throw new Error('无相关权限！')
    }
  },
  // 更新时的钩子
  updated(el: HTMLElement, binding: DirectiveBinding<string[]>) {
    // 权限变化时重新检查
  },
}
